<template>
    <div class="automated-content">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1>Automated Testing Configuration
                <!-- 顶部操作按钮 -->
                <span class="top-actions">
                    <ASpace>
                        <AButton type="text" class="action-btn">
                            <UploadOutlined />Upload
                        </AButton>
                        <AButton type="text" class="action-btn">
                            <ExportOutlined />Export
                        </AButton>
                        <AButton type="text" class="action-btn">
                            <SyncOutlined />Reload
                        </AButton>
                    </ASpace>
                </span>
            </h1>
        </div>

        <div class="automated-wrapper">
            <!-- 左侧模板列表 -->
            <div class="template-list">
                <!-- 搜索栏 -->
                <div class="search-bar">
                    <SearchOutlined />
                    <input type="text" />
                </div>

                <!-- 默认模板 -->
                <div class="template-section">
                    <div class="section-header">
                        <PlusCircleFilled class="add-icon" />Default Template

                        <ASelect ref="select" v-model:value="value" class="select-btn">
                            <ASelectOption value="jack">Jack</ASelectOption>
                            <ASelectOption value="lucy">Lucy</ASelectOption>
                        </ASelect>
                    </div>
                    <div class="template-items">
                        <div v-for="(item, index) in defaultTemplates" :key="index" class="template-item"
                            :class="{ 'selected': selectedTemplate === item }" @click="selectTemplate(item)">
                            <div class="template-info">
                                <div class="template-name">
                                    <FileTextOutlined class="add-icon" />{{ item.name }}
                                </div>
                                <div class="template-date">{{ item.date }}</div>
                                <span @click="openEditModal(item, $event)" class="edit-btn">Edit></span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 我的模板 -->
                <div class="template-section">
                    <div class="section-header">
                        <PlusCircleFilled class="add-icon" />My Template
                    </div>
                    <div class="template-items">
                        <div v-for="(item, index) in myTemplates" :key="index" class="template-item"
                            :class="{ 'selected': selectedTemplate === item }" @click="selectTemplate(item)">
                            <div class="template-info">
                                <div class="template-name">
                                    <FileTextOutlined class="add-icon" />{{ item.name }}
                                </div>
                                <div class="template-date">{{ item.date }}</div>
                                <span @click="openEditModal(item, $event)" class="edit-btn">Edit></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 右侧配置区域 -->
            <div class="template-config">
                <!-- 导航控制 -->
                <div class="nav-controls">
                    <ASpace>
                        <AButton type="text" class="nav-btn">
                            <CaretUpOutlined />
                        </AButton>
                        <AButton type="text" class="nav-btn">
                            <CaretDownOutlined />
                        </AButton>
                        <AButton type="text" class="nav-btn">
                            <DeleteOutlined />
                        </AButton>
                        <AButton type="text" class="nav-btn">
                            <SyncOutlined />
                        </AButton>
                        <span class="nav-number">1</span>
                    </ASpace>
                </div>

                <!-- 测量类型配置 -->
                <div class="measurement-config">
                    <div class="config-section">
                        <h3>Reference measurement</h3>
                    </div>

                    <!-- 测量类型列表 -->
                    <div class="measurement-lists">
                        <!-- 左侧详细列表 -->
                        <div class="detail-list">
                            <div v-for="(item, index) in measurementTypes" :key="index" class="measurement-item"
                                :class="{ active: selectedMeasurement === index }" @click="selectMeasurement(index)">
                                {{ item.name }}
                            </div>
                        </div>

                        <!-- 右侧选择列表 -->
                        <div class="selection-list">
                            <div v-for="(item, index) in measurementTypes" :key="index" class="measurement-item">
                                <ACheckbox v-model:checked="item.checked" @change="handleMeasurementChange(index)" />
                                <span>{{ item.name }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 输入字段 -->
                <div class="input-fields">
                    <div class="input-group">
                        <label>Test Bench Name:</label>
                        <AInput v-model:value="testBenchName" placeholder="Enter test bench name" />
                    </div>
                    <div class="input-group">
                        <label>Switchgear module:</label>
                        <AInput v-model:value="switchgearModule" placeholder="Enter switchgear module" />
                    </div>
                </div>

                <!-- 保存按钮 -->
                <div class="save-section">
                    <AButton type="primary" class="save-btn" @click="handleSave">
                        SAVE
                    </AButton>
                </div>
            </div>
        </div>

        <!-- 编辑弹窗 -->
        <WModal v-model:visible="editModalVisible" title="Edit" width="400px" class="edit-modal"
            @cancel="closeEditModal">
            <div class="edit-content">
                Enter
            </div>
            <template #footer>
                <ASpace>
                    <AButton @click="closeEditModal">Cancel</AButton>
                    <AButton type="primary" @click="handleEditSave">Save</AButton>
                </ASpace>
            </template>
        </WModal>

        <!-- 配置错误弹窗 -->
        <WModal v-model:visible="errorModalVisible" title="Configuration Error" width="400px" class="error-modal"
            @cancel="closeErrorModal">
            <div class="error-content">
                <div class="warning-icon">
                    <ExclamationCircleFilled />
                </div>
                <div class="error-title">Configuration Error</div>
                <div class="error-message">Test configuration conflict, cannot save.</div>
            </div>
        </WModal>

        <!-- 保存弹窗 -->
        <WModal v-model:visible="saveModalVisible" title="Configuration Template" width="80%" class="save-modal"
            @cancel="closeSaveModal">
            <div class="save-content">
                <WTable :data="configRows" :cols="tableColumns" size="small" bordered>
                    <template #testOperation="{ row, index }">
                        <div class="operation-cell">
                            <div class="arrow-controls">
                                <CaretUpOutlined class="arrow-icon" />
                                <CaretDownOutlined class="arrow-icon" />
                            </div>
                            <ASelect v-model:value="row.testOperation" class="select-input" style="width: 150px;">
                                <ASelectOption value="A">E-tb-A-ta</ASelectOption>
                                <ASelectOption value="B">E-tb-B-ta</ASelectOption>
                            </ASelect>
                        </div>
                    </template>

                    <template #count="{ row, index }">
                        <AInputNumber v-model:value="row.count" :min="1" class="count-input" />
                    </template>

                    <template #controlACDC="{ row, index }">
                        <div class="operation-cell">
                            <div class="arrow-controls">
                                <CaretUpOutlined class="arrow-icon" />
                                <CaretDownOutlined class="arrow-icon" />
                            </div>
                            <ASelect v-model:value="row.controlACDC" class="select-input">
                                <ASelectOption value="AC">AC</ASelectOption>
                                <ASelectOption value="DC">DC</ASelectOption>
                            </ASelect>
                        </div>
                    </template>

                    <template #controlFrequency="{ row, index }">
                        <AInputNumber v-model:value="row.controlFrequency" class="frequency-input" />
                    </template>

                    <template #controlRatedVoltage="{ row, index }">
                        <AInputNumber v-model:value="row.controlRatedVoltage" class="voltage-input" />
                    </template>

                    <template #motorACDC="{ row, index }">
                        <div class="operation-cell">
                            <div class="arrow-controls">
                                <CaretUpOutlined class="arrow-icon" />
                                <CaretDownOutlined class="arrow-icon" />
                            </div>
                            <ASelect v-model:value="row.motorACDC" class="select-input">
                                <ASelectOption value="AC">AC</ASelectOption>
                                <ASelectOption value="DC">DC</ASelectOption>
                            </ASelect>
                        </div>
                    </template>

                    <template #motorFrequency="{ row, index }">
                        <AInputNumber v-model:value="row.motorFrequency" class="frequency-input" />
                    </template>

                    <template #motorRatedVoltage="{ row, index }">
                        <AInputNumber v-model:value="row.motorRatedVoltage" class="voltage-input" />
                    </template>

                    <template #testVoltage="{ row, index }">
                        <div class="operation-cell">
                            <div class="arrow-controls">
                                <CaretUpOutlined class="arrow-icon" />
                                <CaretDownOutlined class="arrow-icon" />
                            </div>
                            <ASelect v-model:value="row.testVoltage" class="select-input">
                                <ASelectOption value="High">High</ASelectOption>
                                <ASelectOption value="Medium">Medium</ASelectOption>
                                <ASelectOption value="Low">Low</ASelectOption>
                            </ASelect>
                        </div>
                    </template>

                    <template #testVoltageStandard="{ row, index }">
                        <div class="operation-cell">
                            <div class="arrow-controls">
                                <CaretUpOutlined class="arrow-icon" />
                                <CaretDownOutlined class="arrow-icon" />
                            </div>
                            <ASelect v-model:value="row.testVoltageStandard" class="select-input">
                                <ASelectOption value="GB">GB</ASelectOption>
                                <ASelectOption value="IEC">IEC</ASelectOption>
                                <ASelectOption value="IEEE">IEEE</ASelectOption>
                            </ASelect>
                        </div>
                    </template>

                    <template #action="{ row, index }">
                        <AButton class="reset-btn" @click="resetRow(index)">
                            RESET
                        </AButton>
                    </template>
                </WTable>
            </div>
            <template #footer>
                <div class="footer-content">
                    <ASpace>
                        <AButton class="finished-btn" @click="handleSaveConfirm">
                            FINISHED
                        </AButton>
                    </ASpace>
                </div>
            </template>
        </WModal>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import {
    SearchOutlined,
    PlusCircleFilled,
    UploadOutlined,
    ExportOutlined,
    SyncOutlined,
    CaretUpOutlined,
    CaretDownOutlined,
    DeleteOutlined,
    FileTextOutlined,
    ExclamationCircleFilled
} from '@ant-design/icons-vue';
import WTable from '@/components/WTable/index.vue';
import './index.scss';

// 定义组件属性
defineOptions({
    name: 'AutomatedComponent'
});

// 响应式数据
const selectedMeasurement = ref(1); // Leak measurement
const selectedTemplate = ref(null); // 选中的模板
const testBenchName = ref('');
const switchgearModule = ref('');
const value = ref('');
const editModalVisible = ref(false); // 编辑弹窗显示状态
const errorModalVisible = ref(false); // 错误弹窗显示状态
const saveModalVisible = ref(false); // 保存弹窗显示状态
const editingTemplate = ref(null); // 正在编辑的模板
const editingTemplateName = ref(''); // 编辑的模板名称
const editingTemplateDesc = ref(''); // 编辑的模板描述
const saveTemplateName = ref(''); // 保存的模板名称
const saveTemplateDesc = ref(''); // 保存的模板描述
const saveTemplateCategory = ref('my'); // 保存的模板分类

// 表格列配置
const tableColumns = {
    testOperation: 'Test Operations',
    count: 'Count',
    controlACDC: 'Control AC/DC',
    controlFrequency: 'Control Frequency',
    controlRatedVoltage: 'Control Rated Voltage',
    motorACDC: 'Motor AC/DC',
    motorFrequency: 'Motor Frequency',
    motorRatedVoltage: 'Motor Rated Voltage',
    testVoltage: 'Test Voltage',
    testVoltageStandard: 'Test Voltage Standard',
    action: ''
};

// 配置表格数据
const configRows = ref([
    {
        testOperation: 'E-tb-A-ta',
        count: 1,
        controlACDC: 'AC',
        controlFrequency: 50,
        controlRatedVoltage: 220,
        motorACDC: 'AC',
        motorFrequency: 50,
        motorRatedVoltage: 220,
        testVoltage: 'High',
        testVoltageStandard: 'GB'
    },
    {
        testOperation: 'E-tb-A-ta',
        count: 1,
        controlACDC: 'AC',
        controlFrequency: 50,
        controlRatedVoltage: 220,
        motorACDC: 'AC',
        motorFrequency: 50,
        motorRatedVoltage: 220,
        testVoltage: 'High',
        testVoltageStandard: 'GB'
    },
    {
        testOperation: 'E-tb-A-ta',
        count: 1,
        controlACDC: 'AC',
        controlFrequency: 50,
        controlRatedVoltage: 220,
        motorACDC: 'AC',
        motorFrequency: 50,
        motorRatedVoltage: 220,
        testVoltage: 'High',
        testVoltageStandard: 'GB'
    },
    {
        testOperation: 'E-tb-A-ta',
        count: 1,
        controlACDC: 'AC',
        controlFrequency: 50,
        controlRatedVoltage: 220,
        motorACDC: 'AC',
        motorFrequency: 50,
        motorRatedVoltage: 220,
        testVoltage: 'High',
        testVoltageStandard: 'GB'
    },
    {
        testOperation: 'E-tb-A-ta',
        count: 1,
        controlACDC: 'AC',
        controlFrequency: 50,
        controlRatedVoltage: 220,
        motorACDC: 'AC',
        motorFrequency: 50,
        motorRatedVoltage: 220,
        testVoltage: 'High',
        testVoltageStandard: 'GB'
    },
    {
        testOperation: 'E-tb-A-ta',
        count: 1,
        controlACDC: 'AC',
        controlFrequency: 50,
        controlRatedVoltage: 220,
        motorACDC: 'AC',
        motorFrequency: 50,
        motorRatedVoltage: 220,
        testVoltage: 'High',
        testVoltageStandard: 'GB'
    },
    {
        testOperation: 'E-tb-A-ta',
        count: 1,
        controlACDC: 'AC',
        controlFrequency: 50,
        controlRatedVoltage: 220,
        motorACDC: 'AC',
        motorFrequency: 50,
        motorRatedVoltage: 220,
        testVoltage: 'High',
        testVoltageStandard: 'GB'
    },
    {
        testOperation: 'E-tb-A-ta',
        count: 1,
        controlACDC: 'AC',
        controlFrequency: 50,
        controlRatedVoltage: 220,
        motorACDC: 'AC',
        motorFrequency: 50,
        motorRatedVoltage: 220,
        testVoltage: 'High',
        testVoltageStandard: 'GB'
    },
    {
        testOperation: 'E-tb-A-ta',
        count: 1,
        controlACDC: 'AC',
        controlFrequency: 50,
        controlRatedVoltage: 220,
        motorACDC: 'AC',
        motorFrequency: 50,
        motorRatedVoltage: 220,
        testVoltage: 'High',
        testVoltageStandard: 'GB'
    },
    {
        testOperation: 'E-tb-A-ta',
        count: 1,
        controlACDC: 'AC',
        controlFrequency: 50,
        controlRatedVoltage: 220,
        motorACDC: 'AC',
        motorFrequency: 50,
        motorRatedVoltage: 220,
        testVoltage: 'High',
        testVoltageStandard: 'GB'
    }
]);

// 默认模板数据
const defaultTemplates = ref([
    { name: 'Template 1', date: '2025.10.01 22:40:20' },
    { name: 'Template 1', date: '2025.10.01 22:40:20' },
    { name: 'Template 1', date: '2025.10.01 22:40:20' },
    { name: 'Template 1', date: '2025.10.01 22:40:20' },
    { name: 'Template 1', date: '2025.10.01 22:40:20' },
    { name: 'Template 1', date: '2025.10.01 22:40:20' },
    { name: 'Template 1', date: '2025.10.01 22:40:20' }
]);

// 我的模板数据
const myTemplates = ref([
    { name: 'Template 1', date: '2025.10.01 22:40:20' },
    { name: 'Template 1', date: '2025.10.01 22:40:20' },
    { name: 'Template 1', date: '2025.10.01 22:40:20' }
]);

// 测量类型数据
const measurementTypes = ref([
    { name: 'Reference measurement', checked: true },
    { name: 'Leak measurement', checked: false },
    { name: 'Performance test', checked: false },
    { name: 'Voltage drop measurement', checked: false },
    { name: 'Continuous switching', checked: false },
    { name: 'Performance test', checked: false }
]);

const selectMeasurement = (index) => {
    selectedMeasurement.value = index;
};

const selectTemplate = (template) => {
    selectedTemplate.value = template;
    console.log('Selected template:', template);
};

const openEditModal = (template, event) => {
    event.stopPropagation(); // 阻止事件冒泡
    editingTemplate.value = template;
    editingTemplateName.value = template.name || '';
    editingTemplateDesc.value = template.description || '';
    editModalVisible.value = true;
    console.log('Opening edit modal for:', template);
};

const closeEditModal = () => {
    editModalVisible.value = false;
    editingTemplate.value = null;
    editingTemplateName.value = '';
    editingTemplateDesc.value = '';
};

const openErrorModal = () => {
    errorModalVisible.value = true;
};

const closeErrorModal = () => {
    errorModalVisible.value = false;
};

const openSaveModal = () => {
    saveModalVisible.value = true;
};

const closeSaveModal = () => {
    saveModalVisible.value = false;
    // 清空保存表单数据
    saveTemplateName.value = '';
    saveTemplateDesc.value = '';
    saveTemplateCategory.value = 'my';
};

const handleEditSave = () => {
    console.log('Saving edited template:', editingTemplate.value);
    console.log('New name:', editingTemplateName.value);
    console.log('New description:', editingTemplateDesc.value);

    // 这里可以添加保存逻辑
    // 模拟保存成功，显示错误弹窗
    closeEditModal();
    openErrorModal();
};

const handleMeasurementChange = (index) => {
    console.log('Measurement changed:', index, measurementTypes.value[index]);
};

const handleSave = () => {
    console.log('Saving template configuration...');
    console.log('Test Bench Name:', testBenchName.value);
    console.log('Switchgear Module:', switchgearModule.value);
    console.log('Selected measurements:', measurementTypes.value.filter(item => item.checked));

    // 打开保存弹窗
    openSaveModal();
};

const resetRow = (index) => {
    configRows.value[index] = {
        testOperation: 'E-tb-A-ta',
        count: 1,
        controlACDC: 'AC',
        controlFrequency: 50,
        controlRatedVoltage: 220,
        motorACDC: 'AC',
        motorFrequency: 50,
        motorRatedVoltage: 220,
        testVoltage: 'High',
        testVoltageStandard: 'GB'
    };
    console.log('Reset row:', index);
};

const handleSaveConfirm = () => {
    console.log('Confirming save with configuration:', configRows.value);

    // 这里可以添加实际的保存逻辑
    // 模拟保存成功
    closeSaveModal();

    // 可以选择显示成功提示或错误弹窗
    // openErrorModal(); // 如果需要显示错误
};
</script>
